<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="gl">

	<head>
		<title>cSans - Align demo</title>

		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<meta http-equiv="Content-Language" content="gl" />
		<meta name="author" content="A navalla suíza - http://anavallasuiza.com" />

		<link rel="stylesheet" href="../csans/csans.css" type="text/css" />
		<link rel="stylesheet" href="../csans/grid-950-24-10/css/csans-grid-950-24-10.css" type="text/css" />
		<link rel="stylesheet" href="../csans/align/csans-align.css" type="text/css" />

		<style type="text/css">
			h1 { margin: 0; }
			a { color: #ccc; }
			.align {
				background-color: #000;
				height: 200px;
				color: #666;
			}
			.align .content {
				background-color: #666;
				color: #000;
				padding: 20px 0;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<div class="page">
			<div class="row t4 b8">
				<h1 class="col11 r1">cSans align demo</h1>
				<p class="col12">
					You can align an element inside another element horizontally and vertically.
					No matter its width or height.<br />
					<a href="plugin-align-body.html">Align applied to body</a>
				</p>
			</div>
			<div class="col24 align">
				<div class="middle-center">
					<div class="content col5">
						middle-center
					</div>
				</div>
			</div>
			<div class="col6 align t1">
				<div class="bottom-center">
					<div class="content col3">
						bottom-center
					</div>
				</div>
			</div>
			<div class="col6 align t1">
				<div class="middle-right">
					<div class="content col3">
						middle-right
					</div>
				</div>
			</div>
			<div class="col6 align t1">
				<div class="middle-left">
					<div class="content col3">
						middle-left
					</div>
				</div>
			</div>
			<div class="col6 align t1 last">
				<div class="bottom-center">
					<div class="content col3">
						bottom-center
					</div>
				</div>
			</div>
			
			<div class="col6 align t1">
				<div class="top-center">
					<div class="content col3">
						top-center
					</div>
				</div>
			</div>
			<div class="col6 align t1">
				<div class="bottom-right">
					<div class="content col3">
						bottom-right
					</div>
				</div>
			</div>
			<div class="col6 align t1">
				<div class="bottom-left">
					<div class="content col3">
						bottom-left
					</div>
				</div>
			</div>
			<div class="col6 align t1 last">
				<div class="top-center">
					<div class="content col3">
						top-center
					</div>
				</div>
			</div>
			
			<div class="col6 align t1">
				<div class="bottom-center">
					<div class="content col3">
						bottom-center
					</div>
				</div>
			</div>
			<div class="col6 align t1">
				<div class="top-right">
					<div class="content col3">
						top-right
					</div>
				</div>
			</div>
			<div class="col6 align t1">
				<div class="top-left">
					<div class="content col3">
						top-left
					</div>
				</div>
			</div>
			<div class="col6 align t1 last">
				<div class="bottom-center">
					<div class="content col3">
						bottom-center
					</div>
				</div>
			</div>
			
			<div class="col6 align t1">
				<div class="top-center">
					<div class="content col3">
						top-center
					</div>
				</div>
			</div>
			<div class="col6 align t1">
				<div class="middle-right">
					<div class="content col3">
						middle-right
					</div>
				</div>
			</div>
			<div class="col6 align t1">
				<div class="middle-left">
					<div class="content col3">
						middle-left
					</div>
				</div>
			</div>
			<div class="col6 align t1 last">
				<div class="top-center">
					<div class="content col3">
						top-center
					</div>
				</div>
			</div>
		</div>
	</body>
</html>